<template>
	<view>
		<label> 异步操作</label>
		<button type="primary" @click="removelocal"> 删除本地数据 </button>
		<button type="primary" @click="getlocal"> 获得本地数据 </button>
		<button type="primary" @click="storelocal"> 本地存储数据 </button>


		<view>
			<label> 同步操作</label>

			<button type="primary" @click="removelocalsync"> 删除本地数据 </button>
			<button type="primary" @click="getlocalsync"> 获得本地数据 </button>
			<button type="primary" @click="storelocalsync"> 本地存储数据 </button>
		</view>
		<button @click="getrequest"> 发送get请求 </button>
		<button @click="clickevent($event)"> 测试点击事件 </button>

		<view>
			学科列表:
			<view class="box" :key="idnex" v-for="(item, idnex) in arr">
				{{item}}
			</view>
		</view>

		<button @click="fulshlist"> 点击刷新列表</button>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				arr: ['前端', 'java', 'ui', '大数据', '前端', 'java', 'ui', '大数据']
			}
		},
		methods: {
			removelocalsync() {
				console.info("同步删除本地缓存数据")
				uni.removeStorageSync("sync")
			},
			storelocalsync() {
				console.info("同步测试本地缓存数据")
				uni.setStorageSync("sync", 100)
			},
			getlocalsync() {
				console.info("同步得到本地缓存数据")
				const id = uni.getStorageSync("sync", 100)
				console.info(id)
			},
			getlocal() {
				console.info("得到本地缓存数据")
				uni.getStorage({
					key: 'id',
					success: res => {
						console.info(res)
					}
				})
			},
			removelocal() {
				console.info("删除本地缓存数据")
				uni.removeStorage({
					key: 'id',
					success() {
						confirm("删除成功")
					}
				})
			},
			storelocal() {
				console.info("测试本地缓存数据")
				uni.setStorage({
					key: 'id',
					data: 100,
					success() {
						console.log('存储成功')
					}
				})
			},
			getrequest() {
				uni.request({
					method: "GET",
					url: "http://localhost:8082/api/getlunbo",
					success(res) {
						console.info(res)
					}
				})
			},
			fulshlist() {
				// 通过点击事件的形式来触发下拉刷新
				uni.startPullDownRefresh()
			},
			clickevent(e) {
				console.info("click event", e)
			}
		},
		// 页面触底的时候触发函数
		onReachBottom() {
			console.info("页面到底了")
		},
		// 下拉刷新的函数
		onPullDownRefresh() {
			console.info("触发下拉刷新")
			this.arr.push('GO')
			// 关闭下拉刷新
			uni.stopPullDownRefresh()
			// uni.startPullDownRefresh()
		},
		/**
		 * 可以接受上个界面传递的参数
		 */
		onLoad(options) {
			console.info("页面加载了, 传递的参数为； ", options)
		},
		onShow() {
			console.info("页面显示了")
		},
		onHide() {
			console.info('页面隐藏了')
		},
		onReady() {
			console.info('页面初次渲染完成')
		}
	}
</script>

<style>
	.box {
		height: 80px;
	}
</style>
